<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="css/shop.css">
    <title>Title</title>
</head>
<body>
<div th:block th:include="~{common/top}"></div>

<link rel="stylesheet" href="css/shop.css">
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
<style>
    @font-face {
        font-family: 'huayuan';
        src: url("font/花园肉丸.ttf");
    }

    @font-face {
        font-family: 'cm';
        src: url("font/Begilas.otf");
    }

    .display {
        height: fit-content;
    }

    table {
        line-height: 30px;
        width: 470px;
    }

    .ButtonNext {
        border: none;
        position: relative;
        left: 420px;
        top: 7px;
        color: rgb(190, 158, 111);
    }

    /*下拉列表默认只读*/
    .select-readonly {
        cursor: no-drop;
    }

    .select-readonly option {
        display: none;
    }

    /*确认编辑按钮*/
    .confirm-edit-btn {
        border-radius: 14px;
        border: none;
        background-color: antiquewhite;
        opacity: 80%;
        font-size: 15px;
        font-family: huayuan;
        color: rgb(244, 183, 103);
        cursor: pointer;
        display: none;
        float: right;
        margin-right: 5px;
        margin-top: 4px;
    }


</style>

<div class="display">
    <div id="Catalog">
        <form name="alipayment" action="/confirmOrderForm" method="post" target="_blank">

            <table>
                <tr>
                    <th colspan=2>Payment Details</th>
                </tr>
                <tr>
                    <td>Card Type:</td>
                    <td>
                        <select>
                            <option th:each="cardType : ${session.newOrder.getCardType()}" th:value="${cardType}"
                                    th:text="${cardType}"></option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td>Card Number:</td>
                    <td>
                        <input type="text" name="creditCard" id="creditCard" th:value="${session.newOrder.getCreditCard()}"
                               readonly="readonly">
                    </td>
                </tr>
                <tr>
                    <td>Expiry Date (MM/YYYY):</td>
                    <td>
                        <input type="text" name="expiryDate" id="expiryDate" th:value="${session.newOrder.getExpiryDate()}"
                               readonly="readonly">
                    </td>
                </tr>
                <tr>
                    <th colspan=2>Billing Address</th>
                </tr>

                <tr>
                    <td>First name:</td>
                    <td>
                        <input type="text" id="firstName" name="firstName"
                               th:value="${session.newOrder.getBillToFirstName()}" readonly="readonly">
                    </td>
                </tr>
                <tr>
                    <td>Last name:</td>
                    <td>
                        <input type="text" id="lastName" name="lastName" th:value="${session.newOrder.getBillToLastName()}"
                               readonly="readonly">
                    </td>
                </tr>
                <tr>
                    <td>Address 1:</td>
                    <td>
                        <input type="text" id="address1" name="address1" th:value="${session.newOrder.getBillAddress1()}"
                               readonly="readonly">
                    </td>
                </tr>
                <tr>
                    <td>Address 2:</td>
                    <td>
                        <input type="text" id="address2" name="address2" th:value="${session.newOrder.getBillAddress2()}"
                               readonly="readonly">
                    </td>
                </tr>
                <tr>
                    <td>City:</td>
                    <td>
                        <input type="text" id="city" name="city" th:value="${session.newOrder.getBillCity()}" readonly="readonly">
                    </td>
                </tr>
                <tr>
                    <td>State:</td>
                    <td>
                        <input type="text" id="state" name="state" th:value="${session.newOrder.getBillState()}"
                               readonly="readonly">
                    </td>
                </tr>
                <tr>
                    <td>Zip:</td>
                    <td>
                        <input type="text" id="zip" name="zip" th:value="${session.newOrder.getBillZip()}" readonly="readonly">
                    </td>
                </tr>
                <tr>
                    <td>Country:</td>
                    <td>
                        <input type="text" id="country" name="country" th:value="${session.newOrder.getBillCountry()}"
                               readonly="readonly">
                    </td>
                </tr>

                <tr>
                    <td colspan=2>
                        <input type="checkbox" name="editInformationRequired" id="editInformationRequired">
                        Edit different shipping information...
                        <button class="confirm-edit-btn" id="confirm-edit-btn">Confirm Edit</button>
                    </td>
                </tr>

            </table>

            <input type="submit" class="ButtonNext" value="NEXT→">

        </form>
    </div>
</div>
<script src="js/newOrder.js"></script>


</body>
</html>